<template>
	
	<div class="dropClassContainer" v-if="isShow">
		<el-dialog	
			  :visible.sync="isShow"			 
			  custom-class="el-dialog-bg"
			  :close-on-click-modal="modalclose"
			  :before-close="handleClose">
			  <div slot="title" class="panel_title"><span>退费</span></div>
              <div class="dropcoursecontent">
              	 <div class="dialog">
	              	<div class="stuinfo">
	              		<el-row>
	              			<el-col :span="6">
	              				<span class="spanlabel">姓名：</span>
	              				<span class="spanlabelweight">{{studentdetailprop.realName}}</span>
	              			</el-col>
	              			<el-col :span="6">
	              				<span class="spanlabel">联系人：</span>
	              				<span class="spanlabelweight">{{studentdetailprop.parentName}}</span>
	              			</el-col>
	              			<el-col :span="6">
	              				<span class="spanlabel">联系电话：</span>
	              				<span class="spanlabelweight">{{studentdetailprop.phone}}</span>
	              			</el-col>
	              		</el-row>
	              	</div>
	              	<div class="coursedetail">
	              	  <div class="tablecss">
	              		<table style="width:100%;" cellpadding="0" cellspacing="0">
				      			<thead >
				      				<tr>
				      					<th>名称</th>
				      					<th>收费模式</th>
										<th>收款方式</th>
				      					<th>购买数量</th>
				      					<th>单位</th>
				      					<th>课程单价</th>
				      					<th>课程总价</th>
				      					<th>实际支付</th>
				      					<th>已上(课时/天)</th>
				      					<th>课耗</th>
				      					<th>剩余(课时/天)</th>
				      					<th>剩余课程费用</th>
				      					<th>应退费</th>	
										<th>实际退费</th>		      					
				      				</tr>
				      			</thead>
				      			<tbody  v-if="courseInfo.length>0">
				      				<tr v-for="li in courseInfo">
				      					<td align="center">
				      						<span v-if="li.className">{{li.className}}<br>{{li.courseName}}</span>
				      						<span v-else>{{li.courseName}}</span>
				      					</td>
				      					<td align="center">{{li.chargeMode}}</td>
										<td align="center">{{li.payMode}}</td>

				      					<td align="center">{{li.courseBuyNum}}</td>
										<td align="center">{{li.courseTimeMode}}</td>

				      					<td align="center">{{li.simpleprice}}</td>
				      					<td align="center">{{li.courseMoney}}</td>
				      					<td align="center">{{li.realMoney}}</td>
				      					<td align="center">{{li.useCourseHour}}</td>
				      					<td align="center" v-if="courseType!=2">{{li.useCourseMoney}}</td>
										<td align="center" v-else>--</td>
				      					<td align="center">{{li.surplusCourseHour}}</td>
				      					<td align="center" v-if="courseType!=2">{{li.surplusCourseMoney}}</td>
										<td align="center" v-else>--</td>
				      					<td align="center" v-if="courseType!=2">{{li.needRefundMoney}}</td>
										<td align="center" v-else>
											<el-input-number v-model="li.needRefundMoney" :precision="2" style="width: 1rem;"
					  				  		:min="0" :max="li.courseMoney" :controls="false"></el-input-number>
										</td>
										<td align="center">
											<el-input-number v-if="courseType!=2" v-model="li.relMoney" :precision="2" style="width: 1rem;" @change="relmoneyChange"
					  				 		size="mini" :min="0" :max="li.maxMoney" :controls="false"></el-input-number>
											<el-input-number v-else v-model="li.relMoney" :precision="2" style="width: 1rem;" @change="relmoneyChange"
					  				 		size="mini" :min="0" :max="li.courseMoney" :controls="false"></el-input-number>
										</td>
				      				</tr>		      				
				      			</tbody>
				      			<tbody  v-else >
				      				<tr>
				      					<td colspan="11" align="center">暂无数据</td>
				      				</tr>
				      			</tbody>
		      		    </table>
		      		  </div>
	              		
	              	</div>
	              	<div class="actulrefound">             		
	              		<span class="spanlabelweight">{{totalmoney}}</span>
	              		<span class="spanlabel">应退费总计：</span>
	              	</div>
					<div class="returnmoney">
	              		<span class="spanlabel">实际退费：</span>              		
	              		<el-input disabled style="width:1.5rem;" ref="actulMoney" v-model="actulreturnmonty" placeholder="请输入内容"></el-input>
	              	</div>
	              	<div class="reason">
	              		<div style="margin-bottom:.1rem;" class="spanlabel">退费原因：</div>          	
	              		<el-input 
	              		  ref="reasonText"
						  type="textarea"
						  :rows="4"
						  placeholder="请输入退费原因"
						  v-model="reasontext">
						</el-input>
	              	</div>
	              	<div class="returnMethod">
		              	<span class="spanlabel">退费方式：</span>
			              	 <!-- <el-radio v-model="methodradio" label="1">银联转账</el-radio>
			  				 <el-radio v-model="methodradio" label="2">现金</el-radio> -->
							 <el-radio disabled v-model="courseInfo[0].methodradio" label="100">原路返回</el-radio>
			  				 <el-radio v-model="courseInfo[0].methodradio" :disabled="courseInfo[0].methodradio=='100'" label="2">现金</el-radio>
			  				 <el-radio v-model="courseInfo[0].methodradio" :disabled="courseInfo[0].methodradio=='100'" label="1">银联转账</el-radio>
							 <el-radio v-model="courseInfo[0].methodradio" :disabled="courseInfo[0].methodradio=='100'" label="5">POS机</el-radio>
	                 </div>
	                <div class="payeeInfo">
                	<div class="title">
                		<span style="color: red;">*</span>
                		<span class="spanlabel">收款人信息</span>
                	</div>
                	<div class="payee">
                		<el-input v-model="payee" ref="Payee" style="width:2rem;" placeholder="收款人姓名"></el-input>
                		<el-input v-model="payeelinkphone" ref="payeeLinkphone" style="width:2rem;" placeholder="收款人联系方式"></el-input>
                	</div>
                </div>
                </div>
              </div>
             
		      <div slot="footer" class="footer-btn">
		      	 <el-button @click="btnCancel" class="btnCancel">上一步</el-button>
    			 <el-button @click="btnOk" class="btnOk">确定退费</el-button>
		      </div>
		</el-dialog>
		<!--退费成功-->
		<el-dialog	
			  :visible.sync="isShowsuccess"			 
			  custom-class="el-dialog-bg"
			  :close-on-click-modal="modalclose"
			  :before-close="handleClose2">
			  <div slot="title" class="panel_title2"><span>退费成功</span></div>
              <div class="successInfo">
              	 <div class="dialog">
	              	<div class="line"></div>
	              	<div class="studentInfo">
	              		<el-row>
	              			   <el-col :span="6">
		              			   	<span class="spanlabel">学员姓名：</span>
		              			   	<span class="spanlabelweight">{{studentdetailprop.realName}}\</span>
		              			   	<span class="spanlabelweight">{{studentdetailprop.studentNo}}</span>
	              			   </el-col>
	              			   <el-col :span="6">
	              			   	    <span class="spanlabel">收款人：</span>
	              			   	    <span class="spanlabelweight">{{payee}}</span>
	              			   </el-col>
	              			   <el-col :span="6">
	              			   	    <span class="spanlabel">收款人电话：</span>
	              			   	    <span class="spanlabelweight">{{payeelinkphone}}</span>
	              			   </el-col>
	              			   <el-col :span="6">
	              			   	    <span class="spanlabel">退费时间：</span>
	              			   	    <span class="spanlabelweight">{{droptime}}</span>
	              			   </el-col>
	              		</el-row>
	              	</div>
	                <div class="returnDetail">
                	<div class="title">
                		<span class="spanlabel">退费详情</span>
                	</div>
                	<div class="tablecss">
	              		<table style="width:100%;" cellpadding="0" cellspacing="0">
				      			<thead >
				      				<tr>
				      					<th>名称</th>
				      					<th>收费模式</th>
				      					<th>购买</th>
										<th>单位</th>
				      					<th>课程单价</th>
				      					<th>课程总价</th>
				      					<th>实际支付</th>
				      					<th>已上课时</th>
				      					<th>课耗</th>
				      					<th>剩余课时</th>
				      					<th>剩余课程费用</th>
				      					<th>应退费</th>		
										<th>退款方式</th>	      					
				      				</tr>
				      			</thead>
				      			<tbody  v-if="courseInfo.length>0">
				      				<tr v-for="li in courseInfo">
				      					<td align="center">{{li.className||li.courseName}}</td>
				      					<td align="center">{{li.chargeMode}}</td>
				      					<td align="center">{{li.courseBuyNum}}</td>
										<td align="center">{{li.courseTimeMode}}</td>
				      					<td align="center">{{li.simpleprice}}</td>
				      					<td align="center">{{li.courseMoney}}</td>
				      					<td align="center">{{li.realMoney}}</td>
				      					<td align="center">{{li.useCourseHour}}</td>	
				      					<td align="center">{{li.useCourseMoney}}</td>
				      					<td align="center">{{li.surplusCourseHour}}</td>
				      					<td align="center">{{li.surplusCourseMoney}}</td>
				      					<td align="center">{{li.needRefundMoney}}</td>
										<td align="center">{{li.payMode}}</td>
				      				</tr>		      				
				      			</tbody>
				      			<tbody  v-else >
				      				<tr>
				      					<td colspan="11" align="center">暂无数据</td>
				      				</tr>
				      			</tbody>
		      		    </table>
		      		  </div>
                	
                    <div class="returnfeedetail">
                    	<div class="returnfound">
                    		<span>应退总计：</span>
                    		<span>￥{{totalmoney}}</span>
                    	</div>
                    	<div class="actultotalrefound">
                    		<span>实际退款：</span>
                    		<span style="color: red;font-size: .2rem;">￥{{actulreturnmonty}}</span>
                    	</div>
                    </div>
                </div>
                </div>
              	</div>
             
		      <div slot="footer" class="footer-btn">
		      	 <el-button @click="btnBack" class="btnCancel">返回学员管理</el-button>
    			 <el-button  class="btnOk" style="background: rgb(222, 222, 222);cursor: not-allowed;">打印退费凭条</el-button>
		      </div>
		</el-dialog>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapActions} from 'vuex'; //先要引入
	let vm;
	export default{
		
		data(){
			return {
			  studentdetailprop:null,
			  modalclose:false,
			  payee:'',//收款人
			  payeelinkphone:'',//收款人联系方式
			  reasontext:'',//退款原因
			  actulreturnmonty:'',//实际退款		
			  isShowsuccess:false,//是否退费成功
			  droptime:'',//退费时间
			  courseType:-1,
			}
		},
		methods:{	
			initData(){				 
			 	this.payee='';
		     	this.payeelinkphone='';
			    this.reasontext='';
			    this.actulreturnmonty='';			   
			},
			setInfo(data,row){
				this.payee=data.parentName;
		     	this.payeelinkphone=data.phone;
				this.studentdetailprop = data;
				
				if(row)
					this.courseType=row.courseType;
			},
			handleClose(){
				this.$store.dispatch('dropClass/hidedropClassPanel');
				this.initData();
			},
			handleClose2(){	
				
				this.isShowsuccess=false;
				this.initData();				
			},
			btnCancel(){
				this.$store.dispatch('dropClass/hidedropClassPanel');
				this.initData();
			},
			btnOk(){
				
				//验证
				let actulMoney = this.$refs.actulMoney;//实际退款
				let reasonText = this.$refs.reasonText;//退款原因
				let Payee = this.$refs.Payee;//收款人			
				let payeeLinkphone =this.$refs.payeeLinkphone;//收款人电话
				let rules=[];
				//实际退款金额验证
				if(actulMoney){	
					
					// rules.push({
					// 		judge : tool.judge("integer",actulMoney.value),
					// 		focus : actulMoney,
					// 		tips : "请输入正整数金额"
					// });	
					if(actulMoney.value>this.totalmoney){
						rules.push({
							judge : null,
							focus : actulMoney,
							tips : "退费金额过大"
						});	
					}
				}
				//退款原因验证
				if(reasonText){	
					
					 let len = reasonText.value.length||0;					 
					 if(len>50){
					 	 rules.push({
							judge : "",
							focus : reasonText,
							tips : "不得超过50个字符"
						});	
					 }
				}
                //收款人
                if(Payee){					
					 rules.push({
							judge : tool.judge("name",Payee.value),
							focus : Payee,
							tips : tips.name
					});				  
				}
                //收款人电话
                if(payeeLinkphone){					
					 rules.push({
							judge : tool.judge("phone",payeeLinkphone.value),
							focus : payeeLinkphone,
							tips : tips.phone
					});				  
				}
                if(!tool.validate(rules)) {
	            	
					return;
				}
                
				let paras={
							studentId:this.studentdetailprop.studentId,
							refundMode:'1',
							payeeName:this.payee,
							payeeTel:this.payeelinkphone,
							payMode:this.courseInfo[0].methodradio,
							relMoney:this.actulreturnmonty,
							remark:this.reasontext,
							orderRefundCourseEntityList:[]
				};
				//console.log(this.courseInfo)
				for(let i=0;i<this.courseInfo.length;i++){
					
					paras.orderRefundCourseEntityList.push({
						studentCourseId:this.courseInfo[i].studentCourseId,
						classStudentId:this.courseInfo[i].classId,
						className:this.courseInfo[i].className,
						chargeModeName:this.courseInfo[i].chargeMode,
						buyHour:this.courseInfo[i].courseHour,
						courseOnePrice:this.courseInfo[i].simpleprice,
						courseTotalPrice:this.courseInfo[i].courseMoney,
						// realPayMoney:this.courseInfo[i].realMoney,
						useClassHour:this.courseInfo[i].useCourseHour,
						useMoney:this.courseInfo[i].useCourseMoney,
						surplusClassHour:this.courseInfo[i].surplusCourseHour,
						surplusMoney:this.courseInfo[i].surplusCourseMoney,
						refundMeoey:this.courseInfo[i].needRefundMoney,
						courseId:this.courseInfo[i].courseId,
						realPayMoney:this.courseInfo[i].relMoney,
					})
					
				}
				
				api.refund(paras).then(function(data){
					if(data.result="操作成功"){
						//退款方式处理
						if(vm.courseInfo[0].methodradio=='2'){
							vm.courseInfo.forEach(element => {
								element.payMode='现金';
							});
						}
						else if(vm.courseInfo[0].methodradio=='1'){
							vm.courseInfo.forEach(element => {
								element.payMode='银联转账';
							});
						}

						 vm.$message({
				          message: '退费成功',
				          type: 'success'
				        });
				        vm.$parent.initData();
				        vm.isShowsuccess = true;
						vm.$store.dispatch('dropClass/hidedropClassPanel');	
						vm.droptime=tool.DateToString(new Date(),"yyyy-MM-dd HH:mm:ss");
						
					}
				})
				
			},
			btnBack(){
				this.isShowsuccess=false;
				
			},
			btnPrint(){
				this.initData();
				this.isShowsuccess=false;
			
			},
			relmoneyChange(d){
				// console.log(d)
				// d=Number(d);
				// if(isNaN(d)){
				// 	this.$message.error('请输入数字！');
				// 	return;
				// }
				let actrulMoney=0;
				vm.courseInfo.forEach(element => {
					actrulMoney+=Number(element['relMoney']);
				});
				if(actrulMoney>this.totalmoney){
				vm.courseInfo.forEach(element => {					
					element['relMoney'] = element['needRefundMoney'];					
				});
					this.$message.error('退费金额过大！');
					return;
				}
				this.actulreturnmonty=parseFloat(actrulMoney.toFixed(2));
			}
		},
		computed:{
		
    	 ...mapState({                            
					  isShow:state=>state.dropClass.dropClassDialog					
					}),
		 ...mapGetters("dropClass",{
		 	  courseInfo:"getCourseInfo"
		 }),
		 totalmoney:function(){
		 	let sum=0;
		 	for(let i =0;i<this.courseInfo.length;i++){
		 		sum+=this.courseInfo[i].needRefundMoney;
		 	}
		 	this.actulreturnmonty=sum;
		 	return sum;
		 }					
     },
	    mounted(){
			 vm=this;
			 this.initData();
	     }
     
	}
</script>

<style lang="scss">
	@import "@/style/module/utils.scss";
	.dropClassContainer{
				
		.dropcoursecontent{
			width:100%;
			max-height: 7rem;		
			padding:0 .31rem;
			.stuinfo{
				width:100%;
			    height: .3rem;
			    line-height: .3rem;
			  
			}
			.coursedetail{
				width:100%;
			    max-height: 2rem;
			   
			}
			.actulrefound{
				width:100%;
				height: .5rem;
				line-height: .5rem;
				border-bottom:1px solid $partinglineColor;
				span{
					float: right;
				}
			}
			.returnmoney{
				width:100%;
				margin-top:.2rem;
			    height: .5rem;
			    line-height: .5rem;
			   
			}
			.reason{
				width:100%;
			    // height: 1.3rem;			  			   
			}
			.returnMethod{
				width:100%;
			    height: .6rem;
			    line-height: .6rem;			
			}
			.payeeInfo{
				width:100%;
			    height: .6rem;
			    .title{
			    	width:100%;
			    	float: left;
			    	height: .2rem;
			    	line-height: .2rem;
			    	
			    }
			    .payee{
			    	width:100%;
			    	float: left;
			    	height: .4rem;
			    	line-height: .4rem;
			    }
			}
		}
		.successInfo{
			width:100%;
			max-height: 5rem;		
			padding:0rem .2rem 0rem .2rem;
			.line{
				width:100%;
				height: 1px;
				background: $partinglineColor;
			}
			.studentInfo{
				width:100%;
				height: .4rem;
				line-height: .4rem;				
			}
			.returnDetail{
				width:100%;
				max-height: 4rem;				
				margin-top:.2rem;
			    .title{
			    	width:100%;
			    	height: .3rem;
			    	line-height: .3rem;
			    }
			    .returnfeedetail{
			    	width:100%;
			    	max-height: 1rem;			    	
			    	margin-top:.1rem;
			    	.returnfound{
			    		width:100%;
			    		height: .2rem;
			    		font-size: .16rem;
			    		text-align: right;
			    	}
			    	.actultotalrefound{
			    		width:100%;
			    		height: .5rem;
			    		font-size: .18rem;
			    		text-align: right;
			    	}
			    }
			}
		}
		/**自定义对话框标题样式**/
		.panel_title{				
			padding:.23rem .31rem .23rem .31rem;
			font-size: .22rem;	
		    font-family: "microsoft yahei";
		    color: #333333;		
		}

		.panel_title2{			
			text-align: center;
			padding:.23rem .31rem .23rem .31rem;
			font-size: .22rem;	
		    font-family: "microsoft yahei";
		    color: #333333;		
			
		}
		/**
		 * 自定义对话框样式
		 */
		.el-dialog-bg{
			background: #FFFFFF;
			width:13rem;
			border-radius: .1rem;
			.el-dialog__header{
				padding: 0px;
			}
			.el-dialog__body{
				padding: 0px !important;
			}	
			.el-dialog__footer{
				padding: .3rem;
				.footer-btn{
					width:100%;
					text-align: center;									
			   }
			}		
		}
		.realMoneyRow{
			.el-input__inner{
				padding: 0 !important;
			}
		}
	}
	
</style>